<template>
    <div style="height: 100%">
        <el-table style="width: 100%" border ref="table" :data="tableData" @selection-change="selectionChange" @row-contextmenu="rowContextmenu">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
            <el-table-column label="类别名称" prop="categoryName" align="center"></el-table-column>
            <el-table-column label="资料类别" prop="dataCategory" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.dataCategoryId == 0">车牌号码</span>
                    <span v-if="scope.row.dataCategoryId == 1">合同编号</span>
                    <span v-if="scope.row.dataCategoryId == 2">货号资料</span>
                    <span v-if="scope.row.dataCategoryId == 3">普通资料</span>
                    <span v-if="scope.row.dataCategoryId == 4">银行资料</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
                    <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 右键菜单组件 -->
        <bj-menu :isShow.sync="menus.isShow" :disabled="menus.disabled" @handlerClick="handlerClick"/>
    </div>
</template>
<script>
export default {
	data() {
		return {
			tableData: this.$store.state.auxiliaryStore.tableData,
            row: this.$store.state.auxiliaryStore.row,
            menus: {
				isShow: false,
				row: null,
				disabled: ['打印']
			}
		}
	},
	methods: {
		selectionChange(arr) {            //选中表格行
			this.$store.commit('auxiliaryStore/multipleSelection', arr);
		},
        refresh() {
            const loading = this.$loading({
                lock: true,
                text: '数据刷新中...',
                spinner: 'el-icon-loading',
                background: '#fff'
            });
            setTimeout(() => {
                loading.close();
            }, 1000);
        },
        add() {
            this.$store.commit('auxiliaryStore/updateRowId');           //新增之前先把rowId清空，防止是修改状态
            this.$util.openLayerIframe({title: '小类-新增', zIndex: 13, width: '500px', height: '360px', url: this.$domain + '/#/basicData/auxiliary/subClassForm'});
        },
        update(id) {        //修改小类
            this.$store.commit('auxiliaryStore/updateRowId', id);
            this.$util.openLayerIframe({title: '小类-修改', zIndex: 13, width: '500px', height: '310px', url: this.$domain + '/#/basicData/auxiliary/subClassForm'});
        },
        del(id) {         //右键删除小类
            this.$confirm('确定删除该小类', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                this.$http.delete('auxiliary/delete', {data: [id]}).then(res => {
                    if(res.data.code == 20001) {
                        this.$message({message: '删除小类成功', type: 'success', duration: 1500});
                        setTimeout(() => {
                            this.$store.dispatch('auxiliaryStore/getTreeData');
                        }, 1500);
                    }
                });
            }).catch(() => {
                this.$message({message: '已取消删除', type: 'info', duration: 1500});
            });
        },
        disabedBtn(status, msg, row) {          //右键禁用、启用小类
            if(row['state'] == status) {
                this.$alert(msg + '失败，其中包含已'+ msg +'选项，重新选择！', msg + '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            this.$http.post('auxiliary/updateState?state=' + status, JSON.stringify([row['id']]), {
                headers: {'Content-type': 'application/json;charset=UTF-8'}
            }).then(res => {
                if(res.data.code == 20001) {
                    this.$message({message: msg + '成功', type: 'success', duration: 1500});
                    setTimeout(() => {
                        this.$store.dispatch('auxiliaryStore/getTreeData');
                    }, 1000);
                } else {
                    this.$message({message: res.data.msg || msg + '失败', type: 'error', duration: 1500});
                }
            });
        },
        rowContextmenu(row, event) {           //某一行右键点击时触发
			event.preventDefault();     		//阻止默认事件
			this.menus.isShow = true;			//显示右键菜单
			this.menus.row = row;				//存储当前所在行数据
            let x = event.clientX,
                y = event.clientY,
                pw = $('.tab-front').outerWidth(true),
                ph = $('.tab-front').outerHeight(true),
                cw = $('.bj-menu').outerWidth(true),
                ch = $('.bj-menu').outerHeight(true);
            //处理边界
            if(x <= 0) x = 0;
            if(y <= 0) y = 0;
            if(x >= pw - cw) x = pw - cw - 5;
            if(y >= ph - ch) y = ph - ch - 5;
            $('.bj-menu').css({left: x + 'px', top: y + 'px'});
		},
		handlerClick(index) {		//右键点击菜单选项触发该函数
			switch(index) {
				case 1:
					this.refresh();
					break;
				case 2:
					this.add();
					break;
				case 3:
					this.update(this.menus.row.id);
					break;
				case 4:
					this.del(this.menus.row.id);
					break;
				case 5:
					this.disabedBtn(0, '禁用', this.menus.row);
					break;
				case 6:
					this.disabedBtn(1, '启用', this.menus.row);
					break;
				case 8:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 9:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 10:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				case 11:
					this.tableMove(this.tableData, this.menus.row, index);
					break;
				default: break;
			}
		},
		tableMove(tableData, row, index) {			//上移、下移、置于顶层、置于底层
			switch(index) {
				case 8:
					if(tableData[0]['id'] !== row['id']) {
						let pos = tableData.indexOf(row);		//拿到当前row在数组中所在的位置
						tableData.splice(pos - 1, 0, tableData.splice(pos, 1)[0]);
					} else {
						//数组的第一位，不能上移
						this.$message({message: '已经是第一条了，不可上移', type: 'warning', duration: 1500});
					}
					break;
				case 9:
					if(tableData[tableData.length - 1]['id'] !== row['id']) {
						let pos = tableData.indexOf(row);
						tableData.splice(pos + 1, 0, tableData.splice(pos, 1)[0]);
					} else {
						//数组最后一位，不能下移
						this.$message({message: '已经是最后一条了，不可下移', type: 'warning', duration: 1500});
					}
					break;
				case 10:
					if(tableData[0]['id'] !== row['id']) {
						tableData.unshift(tableData.splice(tableData.indexOf(row), 1)[0]);		//向数组的开头插入row
					} else {
						//数组的第一位，不能置顶
						this.$message({message: '已经是第一条了，不可置顶', type: 'warning', duration: 1500});
					}
					break;
				case 11:
					if(tableData[tableData.length - 1]['id'] !== row['id']) {
						tableData.push(tableData.splice(tableData.indexOf(row), 1)[0]);
					} else {
						//数组最后一位，不能置底
						this.$message({message: '已经是最后一条了，不可置底', type: 'warning', duration: 1500});
					}
					break;
				default: break;
			}
		}
	}
}
</script>